<template>
  <div>
    添加订单页面
    <el-form
      label-position="right"
      label-width="180px"
      :model="orderClientVO"
      :rules="orderRules"
      ref="orderClientVO"
    >
      <el-form-item label="客户名称" style="width: 80%" prop="cname">
        <el-input v-model="orderClientVO.cname" @blur="findClient"></el-input>
      </el-form-item>
      <el-form-item label="客户邮政编码" style="width: 80%" prop="postal">
        <el-input v-model="orderClientVO.postal"></el-input>
      </el-form-item>
      <el-form-item label="客户公司地址" style="width: 80%" prop="site">
        <el-input v-model="orderClientVO.site"></el-input>
      </el-form-item>
      <el-form-item label="联系人" style="width: 80%" prop="contacts">
        <el-input v-model="orderClientVO.contacts"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" style="width: 80%" prop="phone">
        <el-input v-model="orderClientVO.phone"></el-input>
      </el-form-item>
      <el-form-item label="联系人邮箱" style="width: 80%" prop="email">
        <el-input v-model="orderClientVO.email"></el-input>
      </el-form-item>
      <el-form-item label="法人" style="width: 80%" prop="legal">
        <el-input v-model="orderClientVO.legal"></el-input>
      </el-form-item>
      <el-form-item label="法人电话" style="width: 80%" prop="legalphone">
        <el-input v-model="orderClientVO.legalphone"></el-input>
      </el-form-item>
      <el-form-item
        label="客户财务联系人"
        style="width: 80%"
        prop="financecontacts"
      >
        <el-input v-model="orderClientVO.financecontacts"></el-input>
      </el-form-item>
      <el-form-item
        label="客户财务联系电话"
        style="width: 80%"
        prop="financephone"
      >
        <el-input v-model="orderClientVO.financephone"></el-input>
      </el-form-item>
      <el-form-item label="开户银行" style="width: 80%" prop="bank">
        <el-input v-model="orderClientVO.bank"></el-input>
      </el-form-item>
      <el-form-item label="银行账号" style="width: 80%" prop="banknumber">
        <el-input v-model="orderClientVO.banknumber"></el-input>
      </el-form-item>
      <el-form-item label="客户公司规模" style="width: 80%" prop="scale">
        <el-select v-model="orderClientVO.scale" style="width: 100%" placeholder="请选择规模">
          <el-option label="特大型" value="特大型"></el-option>
          <el-option label="大型" value="大型"></el-option>
          <el-option label="中型" value="中型"></el-option>
          <el-option label="小型" value="小型"></el-option>
          <el-option label="微型" value="微型"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户公司业务区域" style="width: 80%" prop="area">
        <el-input v-model="orderClientVO.area"></el-input>
      </el-form-item>
      <el-form-item label="订购商品名称" style="width: 80%" prop="gname">
        <el-select v-model="orderClientVO.gname" style="width: 100%" placeholder="请选择商品">
          <el-option label="无水甲酸" value="无水甲酸"></el-option>
          <el-option label="丙酮氰醇" value="丙酮氰醇"></el-option>
          <el-option label="乙酰腈" value="乙酰腈"></el-option>
          <el-option label="烯丙基三甲硅烷" value="烯丙基三甲硅烷"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="已支付金额/元" style="width: 80%" prop="earnest">
        <el-input v-model="orderClientVO.earnest"></el-input>
      </el-form-item>
      <el-form-item label="总金额/元" style="width: 80%" prop="grossamount">
        <el-input v-model="orderClientVO.grossamount"></el-input>
      </el-form-item>
      <el-form-item label="订购数量" style="width: 80%" prop="number">
        <el-input v-model="orderClientVO.number"></el-input>
      </el-form-item>
      <el-form-item label="销售员" style="width: 80%" prop="creation">
        <el-input v-model="orderClientVO.creation"></el-input>
      </el-form-item>
      <el-form-item label="订单号" style="width: 80%">
        <el-input
          v-model="orderClientVO.ordernumber"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-upload2"
        @click="submitOrder('orderClientVO')"
        >提交订单</el-button
      >
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-refresh"
        @click="reset('orderClientVO')"
        >重置</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      odd: "",
      orderClientVO: {
        cname: "",
        postal: "",
        site: "",
        contacts: "",
        phone: "",
        email: "",
        legal: "",
        legalphone: "",
        financecontacts: "",
        financephone: "",
        bank: "",
        banknumber: "",
        scale: "",
        area: "",
        ordernumber: "",
      },
      //定义验证规则
      orderRules: {
        cname: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        postal: [
          { required: true, message: "请输入客户邮政编码", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        site: [{ required: true, message: "请输入公司地址", trigger: "blur" }],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },

          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入联系人邮箱", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
        banknumber: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        scale: [
          { required: true, message: "请选择客户公司规模", trigger: "blur" },
        ],
        area: [
          {
            required: true,
            message: "请输入客户公司业务区域",
            trigger: "blur",
          },
        ],
        legal: [{ required: true, message: "请输入法人", trigger: "blur" }],
        legalphone: [
          { required: true, message: "请输入法人电话", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        financecontacts: [
          { required: true, message: "请输入客户财务联系人", trigger: "blur" },
        ],
        financephone: [
          {
            required: true,
            message: "请输入客户财务联系电话",
            trigger: "blur",
          },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        gname: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        earnest: [
          { required: true, message: "请输入已支付金额", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        grossamount: [
          { required: true, message: "请输入总金额", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入订单数量", trigger: "blur" },
          { pattern: /^[0-9]\d*$/, message: "请输入整数", trigger: "blur" },
        ],
        creation: [
          { required: true, message: "请输入销售员", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    //获取订单号
    this.$axios.get("/order/getOrderNumber").then((resp) => {
      if (resp.data.code == 200) {
        this.odd = resp.data.msg;
        this.orderClientVO.ordernumber = this.odd;
      }
    });
  },
  methods: {
    //查询客户是否存在
    findClient() {
      console.log(this.orderClientVO)
      this.$axios
        .get("/client/getByCname?cname=" + this.orderClientVO.cname)
        .then((resp) => {
          if (resp.data.code == 200) {
            let client = resp.data.data;
            console.log(client);
            this.orderClientVO.postal = client.postal;
            this.orderClientVO.site = client.site;
            this.orderClientVO.contacts = client.contacts;
            this.orderClientVO.phone = client.phone;
            this.orderClientVO.email = client.email;
            this.orderClientVO.legal = client.legal;
            this.orderClientVO.legalphone = client.legalphone;
            this.orderClientVO.financecontacts = client.financecontacts;
            this.orderClientVO.financephone = client.financephone;
            this.orderClientVO.bank = client.bank;
            this.orderClientVO.banknumber = client.banknumber;
            this.orderClientVO.scale = client.scale;
            this.orderClientVO.area = client.area;
          }
        });
    },

    //重置按钮
    reset(formName) {
      this.$refs[formName].resetFields();
      this.orderClientVO = {
        cname: "",
        postal: "",
        site: "",
        contacts: "",
        phone: "",
        email: "",
        legal: "",
        legalphone: "",
        financecontacts: "",
        financephone: "",
        bank: "",
        banknumber: "",
        scale: "",
        area: "",
        ordernumber: "",
      };
      this.orderClientVO.ordernumber = this.odd;
    },

    //提交订单
    submitOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/order/add", this.orderClientVO).then((resp) => {
            if (resp.data.code == 200) {
              this.$message("订单添加成功");
              this.$router.push("/orderList");
            } else if (resp.data.code == 502) {
              this.$message.error(resp.data.msg);
            } else {
              // 使用Object.entries()将对象转换为键值对数组
              let entries = Object.entries(resp.data.data);
              // 使用Map构造函数将键值对数组转换为Map对象
              let myMap = new Map(entries);
              for (let [key, value] of myMap) {
                this.$message.error(value);
              }
              this.$message.error("数据有误");
            }
          });
        }
      });
    },
  },
};
</script>

<style>
</style>